<template>
  <div class="operatorWrite">
    <Header title="运营商档案卡" />
    <ul class="content">
      <li>
        <span>手机号</span>
        <input type="tel" :placeholder="this.tel?this.tel:'请输入手机号'" v-model="Settel" ref="getTel" />
        <span v-if="this.tel" @click="$router.push({path:'/relieve'})">解绑</span>
      </li>
      <li v-if="!this.tel">
        <span>验证码</span>
        <input type="text" :placeholder="code?code:'请输入验证码'" />
        <button
          class="getCode"
          @click="isGet ? '' : timeFun()"
        >{{ isGet ? `${num}秒后重新获取` : "获取验证码" }}</button>
      </li>
    </ul>
    <p v-show="this.tel" class="tel" @click="add">
      <span class="iconfont icon-icon-test"></span>
      添加运营商
    </p>
    <button class="btn" @click="ctrlc">保存</button>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Header from "@/components/header.vue";
import { mapState, mapMutations } from "vuex";
export default Vue.extend({
  data() {
    return {
      isGet: false,
      num: 10,
      times: setInterval(() => {}),
      code: 0,
      Settel: "",
    };
  },
  components: {
    Header,
  },
  computed: {
    ...mapState(["tel"]),
  },
  methods: {
    ...mapMutations(["setList"]),
    timeFun() {
      let time: number = Math.round(Math.random() * 9);
      this.isGet = true;
      this.times = setInterval(() => {
        this.num -= 1;
        if (time === this.num)
          this.code = Math.round(Math.random() * 899999) + 100000;
        if (this.num === 0) {
          this.num = 10;
          clearInterval(this.times);
          this.isGet = false;
        }
      }, 1000);
    },
    ctrlc() {
      this.$router.push({ path: "/operator" });
      this.setList(this.Settel); //手机号
    },
    // 添加运营商
    add() {
      this.setList("");
    },
  },
  destroyed() {
    clearInterval(this.times);
  },
});
</script>
<style scoped>
.content li {
  padding: 12px 8px;
}
input[type="checkbox"] {
  margin-right: 8px;
}
.tel {
  text-align: center;
  padding: 8px 0;
}
.footer {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
.footer p {
  margin-top: 15px;
}
</style>
